<!DOCTYPE html>
<!--[if lt IE 7 ]><html class="ie ie6" lang="zh-CN"> <![endif]-->
<!--[if IE 7 ]><html class="ie ie7" lang="zh-CN"> <![endif]-->
<!--[if IE 8 ]><html class="ie ie8" lang="zh-CN"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--><html lang="zh-CN"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<title>test</title>
<meta http-equiv="keywords" content="test">
<meta http-equiv="description" content="test">
<link href="assets/css/animate.css" rel="stylesheet">
<link href="assets/css/style.css" rel="stylesheet">
<script src="assets/js/modernizr-2.6.2.min.js"></script>
<script src="assets/js/prefixfree.min.js"></script>
<!--[if lt IE 9]>
<script src="assets/js/css3-mediaqueries.js"></script>
<![endif]-->
</head>
<body class="ui-about-body">
<div id="wrapper"> 
  <section>
  	<div class="about-banner J-about-banner">
		<div class="about-banner-img fn-hide">
			<img class="about-banner-item" src="assets/images/about/banner-01.jpg" alt="">
			<img class="about-banner-item-hide about-banner01-1" src="assets/images/about/banner-01-1.png" alt="">
			<img class="about-banner-item-hide about-banner01-2" src="assets/images/about/banner-01-2.png" alt="">
			<img class="about-banner-item-hide about-banner01-3"src="assets/images/about/banner-01-3.png" alt="">
		</div>
		<div class="about-banner-img fn-hide">
			<img class="about-banner-item" src="assets/images/about/banner-02.jpg" alt="">
			<img class="about-banner-item-hide about-banner02-1" src="assets/images/about/banner-02-1.png" alt="">
			<img class="about-banner-item-hide about-banner02-2" src="assets/images/about/banner-02-2.png" alt="">
			<img class="about-banner-item-hide about-banner02-3"src="assets/images/about/banner-02-3.png" alt="">
		</div>
		<div class="about-banner-img fn-hide">
			<img class="about-banner-item" src="assets/images/about/banner-03.jpg" alt="">
			<img class="about-banner-item-hide about-banner03-1" src="assets/images/about/banner-03-1.png" alt="">
			<img class="about-banner-item-hide about-banner03-2" src="assets/images/about/banner-03-2.png" alt="">
		</div>		
	</div>
</div>
<style>

</style>
<script src="assets/js/jquery.min.js"></script> 
<script src="assets/js/jquery.touchSlider.js"></script>
<script src="assets/js/layer/layer.min.js"></script>
<script src="assets/js/tools.js"></script>
<script src="assets/js/loading.js"></script>  
<script src="assets/js/app-about.js"></script>
<script>
jQuery(function($){
	/*画布队列*/
	var baseWidth = 1920;
	var k = 1;
	function setQueueStart(key,clearKey){
		var FUNC = [
			function (){
				setTimeout(function(){
					var $aboutBannerImg = $('.J-about-banner').find('.about-banner-img').eq(key);
					var $aboutBannerImgPrev = $('.J-about-banner').find('.about-banner-img').eq(clearKey);
					if(key===0){
						$aboutBannerImgPrev.find('.about-banner03-1').css({bottom:700*k,'opacity':0});						
						$aboutBannerImg.find('.about-banner01-1').animate({bottom:30*k,'opacity':1},800,function(){
							$(this).animate({bottom:0},400*k);
						});
					}
					if(key===1){
						$aboutBannerImgPrev.find('.about-banner01-1').css({bottom:-700*k,'opacity':0});						
						$aboutBannerImg.find('.about-banner02-1').animate({bottom:30*k,'opacity':1},800,function(){
							$(this).animate({bottom:0},400*k);
						});
					}
					if(key===2){
						$aboutBannerImgPrev.find('.about-banner02-1').css({bottom:-500*k,'opacity':0});		
						$aboutBannerImg.find('.about-banner03-1').animate({bottom:-20*k,'opacity':1},800,function(){
							$(this).animate({bottom:0},400*k);
						});
					}
					clearQueue();
				},500);	
			},
			function (){
				setTimeout(function(){
					var $aboutBannerImg = $('.J-about-banner').find('.about-banner-img').eq(key);
					var $aboutBannerImgPrev = $('.J-about-banner').find('.about-banner-img').eq(clearKey);
					if(key===0){
						$aboutBannerImgPrev.find('.about-banner03-2').css({right:-500*k,'opacity':0});
						$aboutBannerImg.find('.about-banner01-2').animate({bottom:20*k,'opacity':1},800,function(){
							$(this).animate({bottom:0},400);
						});
					}
					if(key===1){
						$aboutBannerImgPrev.find('.about-banner01-2').css({bottom:-700*k,'opacity':0});
						$aboutBannerImg.find('.about-banner02-2').animate({left:260*k,'opacity':1},800,function(){
							$(this).animate({left:220*k},400);
						});
					}
					if(key===2){
						$aboutBannerImgPrev.find('.about-banner02-2').css({left:-50*k,'opacity':0});
						$aboutBannerImg.find('.about-banner03-2').animate({right:'9%','opacity':1},800,function(){
							$(this).animate({right:'6.25%'},400);
						});
					}
					clearQueue();
				},500);	
			},
			function (){
				setTimeout(function(){
					var $aboutBannerImg = $('.J-about-banner').find('.about-banner-img').eq(key);
					var $aboutBannerImgPrev = $('.J-about-banner').find('.about-banner-img').eq(clearKey);
					if(key===0){
						$aboutBannerImg.find('.about-banner01-3').animate({left:156*k,'opacity':1},800,function(){
							$(this).animate({left:136*k},400);
						});
					}
					if(key===1){
						$aboutBannerImgPrev.find('.about-banner01-3').css({left:-50*k,'opacity':0});
						$aboutBannerImg.find('.about-banner02-3').animate({top:390*k,'opacity':1},800,function(){
							$(this).animate({top:350*k},400);
						});
					}
					if(key===2){
						$aboutBannerImgPrev.find('.about-banner02-3').css({top:-100*k,'opacity':0});
					}
					clearQueue();
				},500);	
			}
		];
		var clearQueue = function() {
			$(document).dequeue("myAnimation");
		};
		$(document).queue("myAnimation",FUNC);
		clearQueue();
	}

	var len = $('.J-about-banner').find('.about-banner-img').length;
	var i = 0;
	var n = 0;
	/*init*/
	setQueueStart(0,2);
	$('.J-about-banner').find('.about-banner-img').eq(0).fadeIn(500);
	bannerAuto();
	/*init end*/
	var timer = setInterval(function(){
		i++;
		if (i>len-1) {
			i=0;
		}
		n = i - 1;
		if(n<0){
			n = len - 1;
		};
		$('.J-about-banner').find('.about-banner-img').fadeOut().eq(i).fadeIn(500).end();
		setQueueStart(i,n);
	},4000);
	function bannerAuto(){
		var winW = $(window).width();
		k = winW/baseWidth;
		$('.J-about-banner').find('.about-banner01-1').width(283*k);
		$('.J-about-banner').find('.about-banner01-2').width(543*k);
		$('.J-about-banner').find('.about-banner01-3').width(574*k);
		
		$('.J-about-banner').find('.about-banner02-1').width(896*k);
		$('.J-about-banner').find('.about-banner02-2').width(354*k);
		$('.J-about-banner').find('.about-banner02-3').width(706*k);
		
		$('.J-about-banner').find('.about-banner03-1').width(320*k);
		$('.J-about-banner').find('.about-banner03-2').width(590*k);
		
		$('.J-about-banner').height(600*k).find('.about-banner-img').eq(0).width(winW).height(600*k).find('.about-banner-item').width(winW).height(600*k);
		$('.J-about-banner').height(600*k).find('.about-banner-img').eq(1).width(winW).height(600*k).find('.about-banner-item').width(winW).height(600*k);
		$('.J-about-banner').height(600*k).find('.about-banner-img').eq(2).width(winW).height(600*k).find('.about-banner-item').width(winW).height(600*k);
	}
	$(window).on('resize',function(){
		setTimeout(function (){
			bannerAuto();
		},30);
	});
});
</script>
</body>
</html>